<script>
export default {
  name: "Info",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      default_avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  created() {

  },
  methods: {
    handleAvatarSuccess(response, file, fileList){
      //把user的头像替换为上传图片的链接
      this.user.avatar = response.data
    },
    update(){
      this.$request.put("/user/update",this.user).then(res =>{
        if(res.code === '200'){
          this.$message.success('修改成功')
          //更新浏览器缓存里的用户信息
          localStorage.setItem('honey-user',JSON.stringify(this.user))
          //更新浏览器缓存的用户信息
          this.$emit('update:user',this.user)
        }else{
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<template>
  <div style="display: flex; align-items: center;justify-content: center;">
    <el-card style="width: 50%">
      <el-form :model="user" label-width="80px" style="padding-right: 30px">
        <div style="text-align: center">
          <el-upload
            accept="jpg"
            action="http://localhost:8080/file/upload"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            :headers="{token: user.token}">
            <img :src="user.avatar || default_avatar" class="avatar">
            <el-button size="mini" type="primary" style="margin: 10px 0;">上传文件</el-button>
          </el-upload>
        </div>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="user.name" placeholder="输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="user.phone" placeholder="输入电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" placeholder="输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="textarea" :rows="3" v-model="user.address" placeholder="输入地址"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" plain @click="update" style="width: 80px; height: 50px;font-size: 18px">保存
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
/deep/ .el-form-item__label {
  font-weight: bold;
  font-size: larger;
}

/deep/ .el-upload{
  border-radius: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 50%;
}
</style>